<template>
    <view class="base-box" :style="{background: bgPageColor}">
        <slot name="header"></slot>
        <view class="content" :style="style">
            <scroll-view class="scroll-box" scroll-y="true" :refresher-triggered="refresherTriggered"
                         :refresher-enabled="refresherEnabled" :refresher-background="refresherBg" @scrolltolower="more"
                         @refresherrefresh="reload">
                <slot :dataList="dataList" :dataInfo="dataInfo"></slot>
            </scroll-view>
        </view>
        <view class="fixed-btn" :style="{background: bgPageColor, padding: btnPadding}">
            <slot name="footer"></slot>
            <sky-safe-area/>
        </view>
    </view>
</template>
<script setup>

const emits = defineEmits(['reload', 'more', 'success'])
const props = defineProps({
    padding: {
        type: String,
        default: '0rpx'
    },
    bgPageColor: {
        type: String,
        default: '#F6F7FB'
    },
    refresherBg: {
        type: String,
        default: 'rgba(0,0,0,0)'
    },
    btnPadding: {
        type: String,
        default: '0 32rpx'
    },
    refresherEnabled: {
        type: Boolean,
        default: false
    },
    apiObj: {
        type: Function,
        default: null
    },
    params: {
        type: Object,
        default: null
    },
    type: {
        type: String,
        default: 'list'
    },
    customize: {
        type: Boolean,
        default: false
    },
    autoLoad: {
        type: Boolean,
        default: true
    }
})
const style = computed(() => {
    return {
        padding: props.padding,
        background: props.bgPageColor
    }
})
const refresherTriggered = ref(false)

const options = ref({})
const optionsCopy = ref({
    page: 1,
    page_size: 8,
    total: 0
})
const dataList = ref([])
const dataInfo = ref([])
// 下拉刷新
const reload = async () => {
    console.log('reload')
    refresherTriggered.value = true
    await reloadHandlr()
}

const refresh=()=>{
    reloadHandlr()
}
const reloadHandlr= async ()=>{
    if (props.customize) {
        console.log('customize')
        emits('reload')
        setTimeout(() => {
            closeRefresher()
        }, 2000)
    } else {
        if (props.type === 'list') {
            console.log('list')
            options.value = qly.tool.deepCopy(optionsCopy.value)
            options.value.page = 1
            dataList.value = []
            await nextTick()
            console.log('dataList',dataList.value)
            getList()
        } else {
            console.log('info')
            getDataInfo()
        }
    }
}

// 加载更多
const more = async () => {
    if (props.customize) {
        emits('more')
    } else {
        if (props.type === 'list') {
            if (options.value.total > dataList.value.length) {
                options.value.page += 1
                getList()
            } else {
                console.log('到底了')
            }
        } else {
            emits('more')
        }
    }
}

// 关闭加载
const closeRefresher = async () => {
    refresherTriggered.value = false
}

// 获取分页数据
const getList = async () => {
    const params = qly.tool.deepCopy(props.params)
    const data = {
        ...options.value,
        ...params
    }
    const res = await props.apiObj(data)
    if (res.code === 1) {
        console.log('dataList',dataList.value)
        
        dataList.value.push(...res.data.data)
        options.value.total = res.data.total
        emits('success', res.data)
    } else {
        qly.dialog.apiError(res).catch()
    }
    closeRefresher()
}

// 获取详情数据
const getDataInfo = async () => {
    const res = await props.apiObj(props.params)
    if (res.code === 1) {
        dataInfo.value = res.data
        emits('success', res.data)
    } else {
        qly.dialog.apiError(res).catch()
    }
    closeRefresher()
}

watch(() => props.params, (newVal, oldVal) => {
    if (props.autoLoad && props.apiObj) {
        console.log('触发了监听')
        options.value = {...options.value, ...newVal}
        reloadHandlr()
    }
}, {
    deep: true,
    immediate: true
})

onMounted(() => {
    options.value = qly.tool.deepCopy(optionsCopy.value)
})
defineExpose({
    reload,
    refresh,
    more,
    closeRefresher
})
</script>
<style scoped lang="scss">

.base-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    
    .content {
        flex: 1;
        overflow: scroll;
        box-sizing: border-box;
    }
}

.scroll-box {
    height: 100%;
}

.safe-top {
    height: 12rpx;
}

</style>
